<template>
  <h2>个人详情信息</h2>
  <hr style="margin-top: 10px" />
  <div id="main_echarts">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="echarts-div" id="person_charts">图1 relation</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { post, get, setItem, getItem, remItem, GetDataTest } from "../../utils/com";
import { mapGetters } from "vuex";
import { defineComponent } from "vue";
export default defineComponent({
  name: "Grop1",
  setup() {
    const person_data = {};
    person_data["names"] = [];
    person_data["data1"] = [];
    person_data["names"] = [];
    const userInfo = getItem("getInfo");
    return {
      person_data,
      userInfo,
    };
  },
  methods: {
    initCharts() {
      this.$echarts.dispose(document.getElementById("person_charts"));
      this.person_chart = this.$echarts.init(document.getElementById("person_charts"));
      this.person_setOptions();
    },
    person_setOptions() {
      var data = this.person_data;
      console.log(22222, data);
      this.person_chart.setOption({
        title: {
          text: "各项数据对比",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "10%",
          data: ["个人", "平均"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            dataZoom: {},
            brush: {
              type: ["rect", "polygon", "clear"],
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data["names"],
        },
    yAxis: [
        {
            type: 'value',
            scale: true,
            splitLine: {
                show: true
            }
        }
    ],
        series: [
          {
            name: "个人",
            type: "line",
            stack: "总量",
            data: data["data1"],
          },
          {
            name: "平均",
            type: "line",
            stack: "总量",
            data: data["data2"],
          },
        ],
      });
    },
    person_axios() {
      const _this = this;

      //   var myget = get("http://127.0.0.1:8000/user/person?id="+this.userInfo.userName).then(function (res) {
      //     if (res) {
      //       console.log(res);
      //       _this.person_data["names"] = res["columns"];
      //       _this.person_data["data1"] = res["data"][0];
      //       console.log(_this.person_data);
      //       // _this.person_setOptions();
      //     }
      //   });

      post("user/person", this.userInfo).then(function (res) {
        if (res) {
          //   console.log(res);
          _this.person_data["names"] = res["columns"];
          _this.person_data["data1"] = res["data"][0];
          //   console.log(_this.person_data);
          _this.person_setOptions();
        }
      });
    },
    verage_axios() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/user/average").then(function (res) {
        _this.person_data["data2"] = res["data"][0];
        // console.log(_this.person_data);
        _this.person_setOptions();
        return res;
      });
    },
  },
  mounted() {
    const _this = this;
    this.initCharts();

    this.person_axios();
    this.verage_axios();
  },
});
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #fafbfc;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  margin: 5px;
  height: 500px;
  width: 100%;
  border-radius: 4px;
  min-height: 36px;
  border: 3px solid rgb(90, 89, 89);
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.echarts-div {
  height: 99%;
  width: 99%;
}
</style>
